<template>
  <Card :title="t('routes.dashboard.workplaceSetting.executeTask')" v-bind="$attrs">
    <template #extra>
      <a-button type="link" size="small">{{ t('routes.dashboard.more') }}</a-button>
    </template>
    <FullCalendar :options="calendarOptions" />
  </Card>
</template>

<script lang="ts" setup>
  import { onMounted, ref, nextTick } from 'vue';
  import { Card } from 'ant-design-vue';
  import FullCalendar from '@fullcalendar/vue3';
  import dayGridPlugin from '@fullcalendar/daygrid';
  import timeGridPlugin from '@fullcalendar/timegrid';
  import interactionPlugin from '@fullcalendar/interaction';
  import zhLocale from '@fullcalendar/core/locales/zh-cn';

  import tippy from 'tippy.js'; //引入 tippy.js
  import 'tippy.js/dist/tippy.css'; //引入 tippy.js
  import 'tippy.js/themes/light.css'; //引入主题
  import 'tippy.js/animations/scale.css';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  const resizeHight = ref<any>(window.innerHeight - 625);

  const handleResize = () => {
    window.addEventListener('resize', () => {
      calendarOptions.value.height = window.innerHeight - 625;
    });
  };
  onMounted(() => {
    nextTick(() => {
      handleResize();
    });
  });

  const calendarOptions = ref<any>({
    plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
    initialView: 'dayGridMonth',
    height: resizeHight.value, // 日历高度
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth',
    },
    locale: zhLocale, // 设置成中文显示
    firstDay: 1, // 设置一周从周一开始
    isRTL: false, // 设置为ture时则日历从右往左显示，貌似是针对阿拉伯人设计的。
    weekends: true, // 是否显示周末，设为false则不显示周六和周日。
    hiddenDays: [], // 隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false。
    weekNumbers: false, // 是否在日历中显示周数，默认不显示。
    dateClick: function (params) {
      console.log(params); // 点击的日期
    },
    events: [
      {
        resourceId: 1,
        title: '未开始任务--（测试1）',
        start: '2024-03-01',
        end: '2024-03-03',
        backgroundColor: '#856d72',
      },
      {
        resourceId: 2,
        title: '进行中任务--（测试2）',
        start: '2024-03-05',
        end: '2024-03-10',
        backgroundColor: '#1772b4',
      },
      {
        resourceId: 3,
        title: '已完成任务--（测试3）',
        start: '2024-03-14',
        end: '2024-03-19',
        backgroundColor: '#96c24e',
      },
      {
        resourceId: 4,
        title: '超期任务--（测试4）',
        start: '2024-03-05',
        end: '2024-03-25',
        backgroundColor: '#ed5a65',
      },
    ],
    eventMouseEnter: function (info) {
      console.log(info);
      let col = info.event.borderColor;
      tippy(info.el, {
        content:
          "<div style='width: 10rem;height:5rem;'>" +
          "<div style='border-bottom: 0.01rem solid #CCCCCC;color: " +
          col +
          "'>" +
          info.event.title +
          '</div>' +
          '<div>开始时间：' +
          info.event.startStr +
          '</div>' +
          '<div>结束时间：' +
          info.event.endStr +
          '</div>' +
          '</div>',
        theme: 'tomato', //主题选取
        interactive: true, //可交互的
        placement: 'top', //悬浮框位置
        allowHTML: true, //是否允许html文本
      });
    },
  });
</script>
